<template>
  <div class="tabPanel zhangdie">
    <div class="tabtitle">
      <li
        v-for="(item, index) in tabList"
        :ref="`tab${index}`"
        :key="item.text"
        :class="{ hit: item.active }"
        @click="handleClick(index)"
      >
        {{ $t(item.text) }}
      </li>
    </div>
    <div class="panes">
      <component :is="currentTabComponent"></component>
    </div>
  </div>
</template>

<script>
import tabUpRank from '@/components/partials/home/TabUpRank'
import tabDownRank from '@/components/partials/home/TabDownRank'
export default {
  components: { tabUpRank, tabDownRank },
  data () {
    return {
      tabList: [
        {
          text: '涨幅榜',
          component: 'tab-up-rank',
          active: true
        },
        {
          text: '跌幅榜',
          component: 'tab-down-rank',
          active: false
        }
      ],
      activeIndex: 0
    }
  },
  computed: {
    currentTabComponent () {
      return this.tabList[this.activeIndex].component
    }
  },
  methods: {
    handleClick (index) {
      this.tabList[this.activeIndex].active = false
      this.tabList[index].active = true
      this.activeIndex = index
    }
  }
}
</script>

<style scoped>
.zhangdie {
  width: 98%;
  padding: 0 1% 60px 1%;
  border-top: 5px solid #f0f3f8;
  overflow: hidden;
}
.zhangdie .tabtitle {
  height: 40px;
  border-bottom: 1px solid #f3f3f3;
}
.zhangdie .tabtitle li {
  float: left;
  height: 40px;
  line-height: 40px;
  width: auto;
  text-align: center;
  cursor: pointer;
  margin: 0 25px 0 2%;
}
.zhangdie .hit {
  border-bottom: 2px solid #2285e2;
  cursor: pointer;
  color: #173e5d;
}
</style>
